<template>
<div id="node-list">
  <el-card v-for="item in tableData" :key="item.name" class="box-card">
    <div slot="header" class="clearfix">
      <span>{{item.name}}</span>

      </el-switch>
    </div>
    <el-switch v-if="item.type=='switch'" style="padding: 3px 5px" v-model="item.value" @change="switchchage(item)"></el-switch>
    <div v-if="item.type=='text'">{{item.name}}={{item.value}}</div>
  </el-card>
</div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      cur_page: 1,
      loading: true
    };
  },
  created() {
    this.getData();
    setInterval(this.getData, 5000);
  },
  methods: {
    getData() {
      this.loading = true;
      this.$axios
        .get("/api/node?device_id=" + this.$route.params.device_id)
        .then(res => {
          if (res.data.code == 0) {
            this.tableData = res.data.data;
          } else if (res.data.code == 2) {
            //未登录
            localStorage.removeItem("user");
            this.$message({
              message: "登录已过时，请重新登录",
              type: "warning"
            });
            this.$router.push("/login");
          }
        });
      this.loading = false;
    },
    switchchage(item) {
      this.$axios
        .put("/api/node/" + this.$route.params.device_id, {
          value: item.value
        })
        .then(res => {
          if (res.data.code == 0) {
            this.tableData = res.data.data;
          } else if (res.data.code == 2) {
            //未登录
            localStorage.removeItem("user");
            this.$message({
              message: "登录已过时，请重新登录",
              type: "warning"
            });
            this.$router.push("/login");
          }
        });
    }
  }
};
</script>

<style scoped>
#node-list {
  display: flex;
  flex-flow: row wrap;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 300px;
  margin: 20px;
}
</style>